<template>
  <div class="oneMap">
    <div class="divTdtMap" ref="mapContainer" id="mapDiv"></div>
    <div class="dataIntr" v-if="actType == '用能单位'">
      <div class="dataIntr-head">图解</div>
      <div class="child">
        <div class="child-img">
          <img src="@/assets/images/visualization/types1.png" alt="" />
        </div>
        <div class="child-text"><span>绿+</span>五星 国家示范单位</div>
      </div>
      <div class="child">
        <div class="child-img">
          <img src="@/assets/images/visualization/types2.png" alt="" />
        </div>
        <div class="child-text"><span>绿</span>四星 省级示范单位</div>
      </div>
      <div class="child">
        <div class="child-img">
          <img src="@/assets/images/visualization/types3.png" alt="" />
        </div>
        <div class="child-text"><span>蓝</span>三星 市级示范单位</div>
      </div>
      <div class="child">
        <div class="child-img">
          <img src="@/assets/images/visualization/types4.png" alt="" />
        </div>
        <div class="child-text"><span>橙</span>二星 一般用能单位</div>
      </div>
      <div class="child">
        <div class="child-img">
          <img src="@/assets/images/visualization/types5.png" alt="" />
        </div>
        <div class="child-text"><span>红</span>一星 重度用能单位</div>
      </div>
    </div>
    <div class="dataType">
      <div
        :class="actType == item.code ? 'child childAct' : 'child'"
        v-for="(item, index) in typeList"
        :key="index"
        @click="changeType(item)"
      >
        <img
          :src="actType == item.code ? item.imgSrcAct : item.imgSrc"
          alt=""
        />
        <span> {{ item.name }}</span>
      </div>
    </div>
    <!-- 用能单位 -->
    <div class="childIntr1" v-if="actMark && actType == '用能单位'">
      <div class="childIntr-content">
        <div class="close" @click="actMark = null">
          <img src="@/assets/images/visualization/close3.png" alt="" />
        </div>
        <div class="intr-title">
          <div class="span1">{{ actMark.deptName }}</div>
          <el-rate v-model="actMark.provincialAssessment" disabled></el-rate>
        </div>

        <div class="intr-head">
          <div
            :class="actMarkActType == 1 ? 'option optionact' : 'option'"
            @click="actMarkActType = 1"
          >
            电耗
          </div>
          <div
            :class="actMarkActType == 2 ? 'option optionact' : 'option'"
            @click="actMarkActType = 2"
          >
            水耗
          </div>
        </div>
        <div class="intr-content">
          <!-- 电耗 -->
          <div v-if="actMarkActType == 1 && actMark.emeterEnergyInfoVo">
            <div class="head1">智能物联</div>
            <div class="option">
              <div class="option-left">配备率(%)</div>
              <div class="option-right">
                {{ actMark.emeterEnergyInfoVo.equipmentPercent }}
              </div>
            </div>
            <div class="option">
              <div class="option-left">实际电耗(kwh)</div>
              <div class="option-right">
                {{ actMark.emeterEnergyInfoVo.emeterTotal }}
              </div>
            </div>
            <div class="option">
              <div class="option-left">实际能耗(khce)</div>
              <div class="option-right">
                {{ actMark.emeterEnergyInfoVo.energyTotal }}
              </div>
            </div>
            <div class="head1">智能诊断</div>
            <div class="option">
              <div class="option-left">额度超支(kgce/㎡)</div>
              <div class="option-right">
                {{ actMark.emeterEnergyInfoVo.baseValExceed }}
              </div>
            </div>
            <div class="option">
              <div class="option-left">预算超支(元)</div>
              <div class="option-right">
                {{ actMark.emeterEnergyInfoVo.budgetOver }}
              </div>
            </div>
            <div class="option">
              <div class="option-left">设备预警(次)</div>
              <div class="option-right">
                {{ actMark.emeterEnergyInfoVo.waringTimes }}
              </div>
            </div>
            <div class="option">
              <div class="option-left">工作违规(次)</div>
              <div class="option-right">
                {{ actMark.emeterEnergyInfoVo.workWaringTimes }}
              </div>
            </div>
            <div class="head1">碳中和</div>
            <div class="option">
              <div class="option-left">清洁能源(kgce)</div>
              <div class="option-right">
                {{ actMark.emeterEnergyInfoVo.cleanEnergy }}
              </div>
            </div>
            <div class="option">
              <div class="option-left">绿色电力(kgce)</div>
              <div class="option-right">
                {{ actMark.emeterEnergyInfoVo.greenEmeter }}
              </div>
            </div>
            <div class="option">
              <div class="option-left">碳汇(kgce)</div>
              <div class="option-right">
                {{ actMark.emeterEnergyInfoVo.carbonTotal }}
              </div>
            </div>
          </div>
          <!-- 水耗 -->
          <div v-if="actMarkActType == 2 && actMark.waterEnergyInfoVo">
            <div class="head1">智能物联</div>
            <div class="option">
              <div class="option-left">配备率(%)</div>
              <div class="option-right">
                {{ actMark.waterEnergyInfoVo.equipmentPercent }}
              </div>
            </div>
            <div class="option">
              <div class="option-left">实际水耗(kwh)</div>
              <div class="option-right">
                {{ actMark.waterEnergyInfoVo.waterTotal }}
              </div>
            </div>
            <div class="option">
              <div class="option-left">实际能耗(khce)</div>
              <div class="option-right">
                {{ actMark.waterEnergyInfoVo.energyTotal }}
              </div>
            </div>
            <div class="head1">智能诊断</div>
            <div class="option">
              <div class="option-left">人均同比</div>
              <div class="option-right">
                {{ actMark.waterEnergyInfoVo | filterTb }}
              </div>
            </div>
            <div class="option">
              <div class="option-left">人均环比</div>
              <div class="option-right">
                {{ actMark.waterEnergyInfoVo | filterHb }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 能耗终端 -->
    <div class="childIntr2" v-if="actMark && actType == '能耗终端'">
      <div class="childIntr-content">
        <div class="close" @click="actMark = null">
          <img src="@/assets/images/visualization/close2.png" alt="" />
        </div>
        <div class="child">
          <div class="child-left">能耗终端：</div>
          <div class="child-right">{{ actMark.name }}</div>
        </div>
        <div class="child">
          <div class="child-left">安装设备数：</div>
          <div class="child-right">{{ actMark.smartDeviceNum }}</div>
        </div>
        <div
          class="child"
          v-for="(item, index) in actMark.deviceTypeNumVo"
          :key="index"
        >
          <div class="child-left" v-if="index == 0">能耗类别：</div>
          <div class="child-right">
            <div>
              {{ item.deviceType | filterType(energyTypeList) }} {{ item.num }}
            </div>
          </div>
        </div>
        <div class="child">
          <div class="child-left">累计能耗：</div>
          <div class="child-right">{{ actMark.totalKgce }}</div>
        </div>
        <div class="child" v-if="actMark.personInCharge">
          <div class="child-left">分管领导：</div>
          <div class="child-right">{{ actMark.personInCharge }}</div>
        </div>
        <div
          class="table1"
          v-if="actMark.deviceList && actMark.deviceList.length > 0"
        >
          <el-table
            style="width: 100%"
            :data="actMark.deviceList"
            :row-class-name="rowclassname"
            :header-row-class-name="headerrowclassname"
          >
            <el-table-column prop="code" label="设备编码" align="center">
            </el-table-column>
            <el-table-column prop="statusName" label="启用状态" align="center">
            </el-table-column>
            <el-table-column
              prop="totalKgce"
              label="累计能耗(kgce)"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="warningTime" label="预警次数" align="center">
            </el-table-column>
            <el-table-column prop="installTime" label="启用日期" align="center">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import L from "leaflet";
import "leaflet.chinatmsproviders";
import {
  getDeptNetworkStatistics,
  getDeptStatisticsDetail,
  networksList,
  getNetworkStatisticsDetail,
  getEnergyByDept,
} from "@/api/visualization/index";
import { listData } from "@/api/system/dict/data"; //字典
export default {
  name: "oneMap",
  components: {},
  data() {
    return {
      mapKey: process.env.VUE_APP_MAPKEY,
      //mapKey: "2b416850dd53510bf17aadfa01204270",
      imgTeye1: require("@/assets/images/visualization/type (1).png"),
      imgTeye2: require("@/assets/images/visualization/type (2).png"),
      imgTeye3: require("@/assets/images/visualization/type (3).png"),
      imgTeye4: require("@/assets/images/visualization/type (4).png"),
      imgTeye5: require("@/assets/images/visualization/type (5).png"),
      actType: "用能单位",
      typeList: [
        {
          name: "用能单位",
          code: "用能单位",
          imgSrc: require("@/assets/images/visualization/tb.png"),
          imgSrcAct: require("@/assets/images/visualization/tbact.png"),
        },
        {
          name: "能耗终端",
          code: "能耗终端",
          imgSrc: require("@/assets/images/visualization/ta.png"),
          imgSrcAct: require("@/assets/images/visualization/taact.png"),
        },
      ],
      markList: [],
      actMarkActType: 0,
      actMark: null,
      map: null,
      layer: null,
      layerGroup: null,
      energyTypeList: [],
      energyCleanPowerList: [],
      energyGreenPowerList: [],
      energyCarbonPowerList: [],
    };
  },
  created() {
    this.initPage();
    this.getlistData();
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap();
      this.initData();
    });
  },
  watch: {},
  filters: {
    filterTb(info) {
      let res = 0;
      if (info.lastYearWater != 0) {
        res = (info.lastMonthWater - info.lastYearWater) / info.lastYearWater;
      }
      return res.toFixed(2);
    },
    filterHb(info) {
      let res = 0;
      if (info.lastLastMonthWater != 0) {
        res =
          (info.lastMonthWater - info.lastLastMonthWater) /
          info.lastLastMonthWater;
      }
      return res.toFixed(2);
    },
    filterType(text, energyTypeList) {
      let res = text;
      energyTypeList.forEach((item) => {
        if (item.dictValue == text) {
          res = item.dictLabel;
        }
      });
      return res;
    },
    numbertoLetter(val) {
      let list = ["A", "B", "C", "D"];
      let index = Number(val) - 1 ? Number(val) - 1 : 0;
      return list[index];
    },
    filterzhcs(
      item,
      energyCleanPowerList,
      energyGreenPowerList,
      energyCarbonPowerList
    ) {
      let filterType = function (idList, zdList) {
        let arr = [];
        idList.forEach((item1) => {
          let res = item1;
          zdList.forEach((item2) => {
            if (item2.dictValue == item1) {
              res = item2.dictLabel;
            }
          });
          if (res !== "") {
            arr.push(res);
          }
        });
        return arr;
      };
      let arr1 = filterType(
        item.cleanEnergyList.split(","),
        energyCleanPowerList
      );
      let arr2 = filterType(
        item.greenPowerList.split(","),
        energyGreenPowerList
      );
      let arr3 = filterType(
        item.carbonSinkList.split(","),
        energyCarbonPowerList
      );
      let zhcs = [...arr1, ...arr2, ...arr3].join(",");

      return zhcs;
    },
  },
  methods: {
    async initPage() {
      await this.getlistData1();
      await this.getlistData2();
      await this.getlistData3();
    },
    async getlistData1() {
      await listData({
        pageSize: 100,
        pageNum: 1,
        dictType: "energy_clean_power",
      })
        .then((res) => {
          if (res.code == 200) {
            this.energyCleanPowerList = res.rows;
          }
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!10201");
        });
    },
    async getlistData2() {
      await listData({
        pageSize: 100,
        pageNum: 1,
        dictType: "energy_green_power",
      })
        .then((res) => {
          if (res.code == 200) {
            this.energyGreenPowerList = res.rows;
          }
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!10202");
        });
    },
    async getlistData3() {
      await listData({
        pageSize: 100,
        pageNum: 1,
        dictType: "energy_carbon_power",
      })
        .then((res) => {
          if (res.code == 200) {
            this.energyCarbonPowerList = res.rows;
          }
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!10203");
        });
    },
    //类型
    getlistData() {
      this.$store.commit("app/updateApiCount", "add");
      listData({ pageSize: 100, pageNum: 1, dictType: "energy_type" })
        .then((res) => {
          if (res.code == 200) {
            this.energyTypeList = res.rows;
          }
          this.$store.commit("app/updateApiCount");
        })
        .catch((err) => {
          this.$store.commit("app/updateApiCount");
          // this.$message.error("系统错误,请联系管理员!10021");
        });
    },
    rowclassname({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "rowA";
      } else {
        return "rowB";
      }
    },
    headerrowclassname() {
      return "rowHead";
    },
    initData() {
      let that = this;
      this.$store.commit("app/updateApiCount", "add");
      let postFunction = getDeptNetworkStatistics;
      if (this.actType == "能耗终端") {
        postFunction = networksList;
      }
      postFunction()
        .then((res) => {
          this.$store.commit("app/updateApiCount");
          if (res.code == 200) {
            this.markList = res.rows;
            if (that.map) {
              that.addMarker();
            } else {
              let set1 = setInterval(function () {
                if (that.map) {
                  that.addMarker();
                  clearInterval(set1);
                }
              }, 1000);
            }
          } else {
            this.$message.warning(res.msg);
          }
        })
        .catch((err) => {
          this.$store.commit("app/updateApiCount");
          // this.$message.error("系统错误,请联系管理员!10022");
        });
    },
    initMap() {
      // 封装方法，不然要重复写很多次index
      let mapLoad = (value) => {
        return L.tileLayer.chinaProvider(`TianDiTu.${value}`, {
          maxZoom: 18,
          minZoom: 8,
          key: this.mapKey,
        });
      };
      // 定义地图图层，官方api有
      // let sateMap = mapLoad("Normal.Map");
      // let sateAnnotion = mapLoad("Normal.Annotion");
      let sateMap = mapLoad("Satellite.Map");
      let sateAnnotion = mapLoad("Satellite.Annotion");
      let satelliteMap = L.layerGroup([sateMap, sateAnnotion]);
      let map = L.map(this.$refs.mapContainer, {
        zoom: 12,
        zoomControl: false,
        attributionControl: false, //去掉右下角logol
        layers: [satelliteMap], //默认图层展示
      });
      this.map = map;
      this.map.setView([29.9872549545339, 122.20593810081483], 12);
    },
    changeType(item) {
      this.actMark = null;
      if (this.actType == item.code) {
        return;
      }
      this.actType = item.code;
      this.initData();
    },
    clearLayer() {
      if (this.layerGroup !== null) {
        this.layerGroup.clearLayers();
      }
    },
    addMarker() {
      this.clearLayer();
      let layersArr = [];
      this.markList.forEach((item, index) => {
        let imgSrc = this.imgTeye1;
        if (item.level == 1) {
          imgSrc = this.imgTeye1;
        } else if (item.level == 2) {
          imgSrc = this.imgTeye2;
        } else if (item.level == 3) {
          imgSrc = this.imgTeye3;
        } else if (item.level == 4) {
          imgSrc = this.imgTeye4;
        } else if (item.level == 5) {
          imgSrc = this.imgTeye5;
        }

        let num = 0;
        if (this.actType == "用能单位") {
          num = item.networkNum;
        } else {
          num = item.smartDeviceNum;
        }

        let markerIcon = L.divIcon({
          iconSize: L.point(30, 30),
          iconAnchor: [5, 5],
          html:
            "<div style='position: relative;width: 30px;height: 30px;border-radius: 15px;width: 30px; background: transparent;'><img style='width: 30px;height: 30px;' src= " +
            imgSrc +
            "><div style=' position: absolute;left:0;top: 0;color: #ffffff;line-height: 30px;text-align: center;width: 30px;'>" +
            num +
            "</div></div>",
        });
        let marker = L.marker([item.latitude, item.longitude], {
          icon: markerIcon,
        });

        // marker.bindPopup("222"); // 标记点击弹窗
        // marker.bindTooltip("23333"); //标记悬浮弹窗

        marker.on("click", (e) => {
          this.markerClick(item);
        });

        layersArr.push(marker);
      });

      this.layerGroup = L.layerGroup(layersArr);
      this.map.addLayer(this.layerGroup);
    },

    markerClick(e) {
      this.$store.commit("app/updateApiCount", "add");
      //   let postFunction = getDeptStatisticsDetail;
      let postFunction = getEnergyByDept;
      let postData = {
        deptId: e.deptId,
      };
      if (this.actType == "能耗终端") {
        postFunction = getNetworkStatisticsDetail;
        postData = {
          networkId: e.id,
        };
      }
      postFunction(postData)
        .then((res) => {
          this.$store.commit("app/updateApiCount");
          if (res.code === 200) {
            this.actMark = res.data;
            this.actMarkActType = 1;
          } else {
            this.$message.warning(res.msg);
            return false;
          }
        })
        .catch((err) => {
          this.$store.commit("app/updateApiCount");
          // this.$message.error("系统错误,请联系管理员!10023");
        });
    },
  },
};
</script>

<style lang="scss">
.leaflet-div-icon {
  background: none;
  border: none;
}
.oneMap {
  margin: 20px;
  position: relative;
  width: calc(100%-20px);
  // min-height: 590px;
  height: 850px;
  //  padding: 5px;
  box-sizing: border-box;
  .divTdtMap {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 590px;
    height: 100%;
    z-index: 0;
  }
  .dataIntr {
    position: absolute;
    bottom: 50px;
    left: 18px;
    width: 240px;
    height: 257px;
    background: rgba(0, 30, 56, 0.85);
    box-shadow: 0px 0px 10px 0px rgba(0, 114, 204, 0.21);
    padding: 0;
    box-sizing: border-box;
    .dataIntr-head {
      width: 240px;
      height: 40px;
      background: #3385ff;
      line-height: 40px;
      font-size: 16px;
      font-family: PingFangTC-Medium, PingFangTC;
      font-weight: 500;
      color: #ffffff;
      text-align: center;
    }
    .child {
      height: 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 20px;
      .child-img {
        font-size: 0;
        img {
          width: 20px;
          height: 20px;
        }
      }
      .child-text {
        margin-left: 8px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 17px;
        span {
          display: inline-block;
          width: 30px;
        }
      }
    }
  }
  .dataType {
    position: absolute;
    top: 48px;
    left: 40px;
    width: 92px;
    height: 116px;
    transform: scale(1.1);
    .child {
      width: 92px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
      background: url("~@/assets/images/visualization/btn3.png");
      background-size: 92px 32px;
      cursor: pointer;
      img {
        width: 16px;
        height: 16px;
      }
      span {
        margin-left: 6px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }
    }
    .child:last-child {
      margin-bottom: 0;
    }
    .childAct {
      background: url("~@/assets/images/visualization/btn4.png");
      background-size: 92px 32px;
      span {
        color: #00f1fd;
      }
    }
  }
  .childIntr {
    position: absolute;
    bottom: 50px;
    right: 18px;
    width: 334px;
    background: rgba(0, 9, 19, 0.8);
    box-sizing: border-box;
    z-index: 100;

    .childIntr-content {
      padding: 10px 0 20px 0;
      max-height: 380px;
      width: 334px;
      overflow-y: auto;
    }
    .childIntr-content::-webkit-scrollbar {
      width: 0;
    }
    .close {
      padding-right: 20px;
      text-align: right;
      img {
        width: 20px;
        height: 20px;
      }
    }
    .child {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      margin-top: 5px;
      padding: 3px 40px 3px 0;
      .child-left {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 22px;
      }
      .child-right {
        width: 180px;
        //height: 32px;
        line-height: 22px;
        padding: 0 12px;

        // border: 1px solid rgba(255, 255, 255, 0.85);
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.85);
      }
    }
    .table1 {
      padding: 10px 0 5px 0;
      width: 324px;
      margin: 0 auto;
      box-sizing: border-box;
      .el-table--border {
        background: none;
      }
      .rowHead {
        background: none !important;
        th {
          background: none !important;
          color: #ffffff;
          border-right: 1px solid #ffffff;
          border-bottom: 1px solid #ffffff;
          // height: 35px;
        }
      }
      .rowA {
        background: none;
        td {
          // height: 30px;
          // background: rgba(0, 9, 19, 0.8) !important;
          background: none !important;
          color: #ffffff;
          border-right: 1px solid #ffffff;
          border-bottom: 1px solid #ffffff;
        }
      }
      /* 定义滚动条样式 */
    }
  }
  .childIntr1 {
    position: absolute;
    bottom: 50px;
    right: 18px;
    width: 362px;
    height: 582px;
    box-sizing: border-box;
    z-index: 100;
    padding: 10px 30px;
    background: url("~@/assets/images/visualization/bgs.png") no-repeat;
    background-size: 362px 572px;
    .childIntr-content {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .close {
      text-align: right;
      position: absolute;
      right: 0;
      top: 5px;
      z-index: 99;
      img {
        width: 30px;
        height: 30px;
        cursor: pointer;
      }
    }
    .intr-title {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 40px;
      width: 100%;
      .span1 {
        max-width: 140px;
        font-size: 22px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 40px;
        margin-right: 20px;
        box-sizing: border-box;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .intr-head {
      display: flex;
      justify-content: flex-start;
      .option {
        font-size: 22px;
        font-family: PingFangSC-Medium, PingFang SC;
        color: #ffffff;
        line-height: 30px;
        //width: 100px;
        border-bottom: 2px solid rgba(0, 241, 253, 0);
        height: 40px;
        padding: 0 10px;
        text-align: center;
        margin-right: 20px;
        cursor: pointer;
      }
      .optionact {
        color: rgba(0, 241, 253, 1);
        border-bottom: 2px solid rgba(0, 241, 253, 1);
      }
    }
    .intr-content {
      .head1 {
        position: relative;
        font-size: 22px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #00f1fd;
        line-height: 40px;
        padding-left: 14px;
        height: 40px;
        width: 100%;
      }
      .head1::before {
        position: absolute;
        content: "";
        width: 4px;
        height: 22px;
        top: 9px;
        left: 0;
        background: RGBA(1, 210, 225, 1);
      }
      .option {
        display: flex;
        // justify-content: center;
        align-items: center;
        height: 34px;
        padding-left: 20px;
        .option-left {
          width: 50%;
          text-align: right;
          line-height: 40px;
          color: #ffffff;
        }
        .option-right {
          width: 50%;
          height: 40px;
          line-height: 40px;
          padding-left: 10%;
          box-sizing: border-box;
          text-align: left;
          color: #ffffff;
        }
      }
    }
  }
  .childIntr2 {
    position: absolute;
    bottom: 50px;
    right: 18px;
    width: 518px;
    background: rgba(0, 30, 56, 0.88);
    box-shadow: 0px 0px 20px 0px rgba(0, 114, 204, 0.21);
    box-sizing: border-box;
    z-index: 100;
    padding: 10px;

    .childIntr-content {
      height: 100%;
      max-height: 500px;
      width: 498px;
      overflow-y: auto;
    }
    .childIntr-content::-webkit-scrollbar {
      width: 0;
    }
    .close {
      padding-right: 20px;
      text-align: right;
      z-index: 99;
      img {
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
    }
    .childzjhead {
      display: flex;
      align-items: center;
      span {
        font-size: 20px;
        color: #ffffff;
        padding-right: 20px;
      }
    }
    .child {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      margin-top: 5px;
      padding: 3px 0 3px 10px;
      .child-left {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 22px;
      }
      .child-right {
        width: 180px;
        //height: 32px;
        line-height: 22px;
        padding: 0 12px;

        // border: 1px solid rgba(255, 255, 255, 0.85);
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.85);
      }
    }
    .table1 {
      width: 496px;
      padding: 0;
      box-sizing: border-box;
      margin: 20px auto 0 auto;
      box-sizing: border-box;
      .el-table {
        background: none;
      }
      .el-table::before {
        height: 0;
      }
      .el-table--border {
        background: none;
      }
      .rowHead {
        background: none;
        // width: 486px;
        th {
          color: #ffffff;
          border-right: none;
          border-bottom: 1px solid #005594;
          height: 50px;
          width: 94px;
          background: rgba(51, 133, 255, 0.4) !important;
        }
      }
      .rowA {
        background: none;
        width: 486px;
        td {
          height: 50px;
          background: rgba(51, 133, 255, 0.4) !important;
          color: #ffffff;
          border-right: 0px solid #005594;
          border-bottom: 0px solid #005594;
          width: 94px;
        }
        .el-table__cell:last-child {
          border-right: none;
        }
      }
      .rowB {
        background: none;
        width: 486px;
        td {
          height: 50px;
          background: rgba(0, 36, 39, 0.41) !important;
          color: #ffffff;
          border-right: 0px solid #005594;
          border-bottom: 0px solid #005594;
          width: 94px;
        }
        .el-table__cell:last-child {
          border-right: none;
        }
      }
      /* 定义滚动条样式 */
    }
  }
}
</style>
